<template>
  <div>
    <main-layout>
      <template v-slot:top>
        <el-form ref="searchForm" :inline="true" :model="searchInfo">
          <el-form-item label="农场名称">
            <el-input v-model="searchInfo.farmName" placeholder="农场名称" clearable />
          </el-form-item>
          <el-form-item label="联系人">
            <el-input v-model="searchInfo.contacts" placeholder="联系人" clearable />
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="searchInfo.contactsPhone" placeholder="手机号" clearable />
          </el-form-item>
          
          <el-form-item label="农场位置">
            <el-input v-model="searchInfo.locationName" placeholder="农场位置" clearable />
          </el-form-item>
          <el-form-item label="公司">
            <company-select v-model="searchInfo.companyId" width="140px" :disabled="userStore.userInfo.roleId!=1"/>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="searchInfo.isEnable" clearable placeholder="请选择状态" style="width: 140px;">
              <el-option :value="true" label="启用" />
              <el-option :value="false" label="禁用" />
            </el-select>
          </el-form-item>
          <el-form-item label="创建时间">
            <el-date-picker v-model="time" type="datetimerange" range-separator="至" start-placeholder="开始时间"
              end-placeholder="结束时间" value-format="YYYY-MM-DD HH:mm:ss"/>
          </el-form-item>
          

          <el-form-item>
            <el-button size="small" type="primary" icon="search" @click="onSubmit">查询</el-button>
            <el-button size="small" icon="refresh" @click="onReset">重置</el-button>
          </el-form-item>
        </el-form>
      </template>

      <div class="gva-btn-list">
        <el-button size="small" type="primary" icon="Plus" @click="goAdd('')">新增农场</el-button>
      </div>

      <c-table ref="tableRef" :page="{ pageSize:limit,pageIndex:page,total}" :lists="tableData" @current-change="handleCurrentChange"
        @size-change="handleSizeChange" :loading="loading" :sequence="false" rowKey="farmId">
        <el-table-column label="农场名称" min-width="150" prop="farmName" />
        <el-table-column align="center" label="公司名称" min-width="100" prop="companyName" />
        <el-table-column align="center" label="农场位置"  prop="locationName" />
        <el-table-column align="center" label="详细地址"  prop="locationDetail"  min-width="150"/>
        <el-table-column align="center" label="状态" width="100" prop="phone" >
          <template #default="scope">
            <!-- <el-tag v-if="scope.row.isEnable==false" type="danger">禁用</el-tag>
            <el-tag v-else-if="scope.row.isEnable==true">启用</el-tag> -->
            <status-switch v-if="scope.row" v-model="scope.row.isEnable" :ajaxMethod="updateFarmStatus" 
              :params="{farmId:scope.row.farmId,isEnable:!scope.row.isEnable}"/>
          </template>
        </el-table-column>
        <el-table-column align="center" label="联系人" width="100" prop="contacts"></el-table-column>
        <el-table-column align="center" label="手机号" width="120" prop="contactsPhone" />
        <el-table-column align="center" label="创建人" width="120" prop="userName" />
        <el-table-column align="center" label="创建时间" width="170" >
          <template #default="scope">
            {{ formatDateLong(scope.row.createTime) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="70px" fixed="right">
          <template #default="scope">
              <el-button type="text" icon="edit" size="small" @click="goAdd(scope.row.farmId)">编辑</el-button>
              <!-- <el-button type="text" icon="delete" size="small" >删除</el-button> -->
          </template>
        </el-table-column>
      </c-table>

    </main-layout>

  </div>
</template>

<script setup name="System-Farm-List">
import { nextTick, ref, watch, onActivated,reactive,onMounted } from 'vue'
import {useRouter} from 'vue-router'

import {getFarmList,updateFarmStatus} from '@/api/system'
import mainLayout from '@/components/custom/mainLayout.vue'
import cTable from '@/components/custom/cTable.vue'
import {formatDateLong,phoneReplace,formatDate} from '@/utils/format'
import { useUserStore } from '@/pinia/modules/user'
import { useFramStore } from '@/pinia/modules/farm'
import companySelect from '@/components/custom/companySelect.vue'
import statusSwitch from '@/components/custom/statusSwitch.vue'
import {message} from '@/utils/element'

const router = useRouter()

const userStore = useUserStore()
const framStore = useFramStore()

onMounted(()=>{
  init()
})

const page = ref(1)
const limit = ref(10)
const total = ref(0)

const tableData = ref([])
const searchInfo = ref({})
const time = ref('')
const loading = ref(true)
const tableRef = ref(null)


const init = () => {
  page.value = 1
  onReset()
  //getTableData()
}

const onReset = () => {
  time.value = ''
  searchInfo.value = {}
  page.value = 1
  getTableData()
}
// 搜索
const onSubmit = () => {
  page.value = 1
  tableRef.value.clear_selection()  // 清空所选
  getTableData()
}
// 分页
const handleSizeChange = (val) => {
  page.value = 1
  limit.value = val
  getTableData()
}

const handleCurrentChange = (val) => {
  page.value = val
  getTableData()
}

// 查询
const getTableData = async () => {
  if(userStore.userInfo.roleId!=1){ // 不是平台管理员
    searchInfo.value.companyId = userStore.userInfo.companyId
  }
  
  if(time.value){
    searchInfo.value.createTimeStart = time.value[0]
    searchInfo.value.createTimeEnd = time.value[1]
  }else{
        delete searchInfo.value.createTimeStart
        delete searchInfo.value.createTimeEnd
  }
  const res = await getFarmList({ page: page.value, limit: limit.value, ...searchInfo.value })
  if (res.code == 0) {
    tableData.value = res.data
    total.value = res.total
  }
  loading.value = false
}

// let tableCheckeds = []
// const selectionChange= (items)=>{
//   tableCheckeds = items
// }

const goAdd = async (id)=>{
  framStore.set_backUrl('/system/farm/list')
  router.push(id?`/system/farm/add?id=${id}`:'/system/farm/add')
}


</script>

<style lang="scss" scoped>
.inputLine {
  display: flex;
  width: 300px;
  .zhi{
    padding: 0 10px;
  }
  s{
    font-style: normal;
    text-decoration: none;
    padding: 0 0 0 5px;
    color: var(--el-text-color-regular);
  }
}
</style>
